<!--
  ~ The MIT License (MIT)
  ~
  ~ Copyright (c) 2019 ‭‭‭‭‭‭‭‭‭‭‭‭[smallbun] www.smallbun.org
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
  ~ this software and associated documentation files (the "Software"), to deal in
  ~ the Software without restriction, including without limitation the rights to
  ~ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  ~ the Software, and to permit persons to whom the Software is furnished to do so,
  ~ subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  ~ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  ~ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  ~ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  ~ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  -->

<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <head>
        <div th:include="fragments/include  :: header('添加')"></div>
        <!--放到header.html会和主页tab样式冲突-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@3.2.1/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.12.1/dist/bootstrap-table.min.css">
    </head>
</head>
<body class="list-body">
<section class="content">
    <div class="ibox">
        <div class="ibox-content">
            <!--搜索框-->
            <div class="row">
                <th:block sec:authorize="hasAuthority('sys:user:query')">
                    <div class="col-lg-12">
                        <div class="pull-left">
                            <!--查询内容，并设置ID，方便查询和重置-->
                            <div class="form-inline" id="query">
                                <div class="form-group">
                                    <label class="control-label">表名：</label>
                                    <input type="text" placeholder="请输入表名" name="tableName"
                                           class="form-control iform-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">表说明：</label>
                                    <input type="text" placeholder="请输入表描述" name="description"
                                           class="form-control iform-control">
                                </div>
                            </div>
                        </div>
                        <!--右侧操作按钮-->
                        <div class="pull-right">
                            <button class="btn btn-white btn-sm" onclick="search('query')"><i class="fa fa-search"></i>
                                查询
                            </button>
                            <button class="btn btn-white btn-sm" onclick="reset('query')"><i class="fa fa-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </th:block>
            </div>
            <br/>
            <div class="row">
                <div class="col-lg-12">
                    <table id="jqGrid" class="table table-bordered table-striped"></table>
                    <div id="jqGridPager"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<div th:include="fragments/include :: include-js"></div>
<script type="text/javascript">


    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: contextPath + 'database/tables',
            datatype: "json",
            colNames: ['表名', '表描述'],
            colModel: [
                {
                    name: 'tableName',
                    index: 'tableName',
                    align: 'center',
                    title: false,
                    sortable: false,
                    resizable: false
                },
                {
                    name: 'description',
                    index: 'description',
                    align: 'center',
                    title: false,
                    sortable: false,
                    resizable: false
                },
            ],
            sortable: true,
            loadonce: true,
            viewrecords: true,
            height: '400',
            rowNum: 10,
            rowList: [20, 30, 50],
            rownumWidth: 25,
            autowidth: true,
            multiselect: true,
            regional: 'cn',
            pager: "#jqGridPager",
            gridComplete: function () {
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            }
        });
    });
</script>
</html>